<template>
  <div class="invest-money">
    <el-row style="margin-top:15px">
      <el-col :span="12">
        <el-card style="width:98%;">
          <div slot="header">
            <el-row style="margin:20px 0 0 20px;">
              <el-col :span="12">
                <p>线上课程</p>
              </el-col>
              <el-col :span="4" :offset="6">
                <el-button type="primary" @click="selectCourse = true">选择课程</el-button>
              </el-col>
            </el-row>
          </div>
          <el-row style="margin:20px 0 0 20px;">
            <p>已选课程:</p>
            <el-table :data="courseTable">
              <el-table-column label="课程图片">
                <template slot-scope="scope">
                  <img :src="scope.row.courseAvatar" alt width="60" height="60" />
                </template>
              </el-table-column>
              <el-table-column label="课程名称" prop="name"></el-table-column>
              <el-table-column label="价格" prop="price"></el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteCourse(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card style="width:100%;">
          <div slot="header">
            <el-row style="margin:20px 0 0 20px;">
              <el-col :span="12">
                <p>线上商品</p>
              </el-col>
              <el-col :span="4" :offset="6">
                <el-button type="primary" @click="selectGoods = true">选择商品</el-button>
              </el-col>
            </el-row>
          </div>
          <el-row style="margin:20px 0 0 20px;">
            <p>已选商品:</p>
            <el-table :data="goodsTable">
              <el-table-column label="商品图片" style="padding:5px 0">
                <template slot-scope="scope">
                  <img :src="scope.row.avatar" width="50" height="50" />
                </template>
              </el-table-column>
              <el-table-column label="商品名称" prop="name"></el-table-column>

              <el-table-column label="现价" prop="price"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteGoods(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin-top:15px">
      <el-col>
        <el-card style="width:100%;">
          <div slot="header">
            <el-row style="margin:20px 0 0 20px;">
              <el-col :span="12">
                <p>线下活动</p>
              </el-col>
              <el-col :span="4" :offset="6">
                <el-button type="primary" @click="selectActivity = true">选择活动</el-button>
              </el-col>
            </el-row>
          </div>
          <el-row style="margin:20px 0 0 20px;">
            <p>已选活动:</p>
            <el-table :data="activityTable">
              <el-table-column label="活动图片" style="padding:5px 0">
                <template slot-scope="scope">
                  <img :src="scope.row.poster" width="50" height="50" />
                </template>
              </el-table-column>
              <el-table-column label="活动名称" prop="name"></el-table-column>
              <el-table-column label="活动时间" prop="activeDate"></el-table-column>
              <el-table-column label="报名时间" prop="enrollDate"></el-table-column>
              <el-table-column label="活动地点" prop="place"></el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteActivity(scope.$index, scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="活动选择" :visible.sync="selectActivity">
      <el-row>
        <el-col :span="12">
          <el-input v-model="searchActivity" placeholder="请输入活动名称"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button icon="el-icon-search" type="info" @click="getActivityList()">搜索</el-button>
        </el-col>
      </el-row>

      <el-table :data="activityList" tooltip-effect="dark" @selection-change="getActivityId">
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="活动图片" style="padding:5px 0">
          <template slot-scope="scope">
            <img :src="scope.row.poster" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column label="活动名称" prop="name"></el-table-column>
        <el-table-column label="活动时间" prop="activeDate"></el-table-column>
        <el-table-column label="报名时间" prop="enrollDate"></el-table-column>
        <el-table-column label="活动地点" prop="place"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage3"
        :total="activityTotal"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectActivity = false">取 消</el-button>
        <el-button type="primary" @click="submitActivity()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="商品选择" :visible.sync="selectGoods">
      <el-row>
        <el-col :span="12">
          <el-input v-model="searchGoods" placeholder="请输入商品名称"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button icon="el-icon-search" type="info" @click="getGoodsLists()">搜索</el-button>
        </el-col>
      </el-row>

      <el-table :data="goodsList" tooltip-effect="dark" @selection-change="getGoodsId">
        <el-table-column type="selection"></el-table-column>

        <el-table-column label="商城图片" style="padding:5px 0">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column label="商城名称" prop="name"></el-table-column>

        <el-table-column label="现价" prop="price"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage2"
        :total="goodsTotal"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectCourse = false">取 消</el-button>
        <el-button type="primary" @click="submitGoods()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="课程选择" :visible.sync="selectCourse">
      <el-row>
        <el-col :span="12">
          <el-input v-model="searchCourse" placeholder="请输入课程名称"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button icon="el-icon-search" type="info" @click="getCouresList()">搜索</el-button>
        </el-col>
      </el-row>

      <el-table :data="courseList" tooltip-effect="dark" @selection-change="getCourseId">
        <el-table-column type="selection"></el-table-column>

        <el-table-column label="课程图片" style="padding:5px 0">
          <template slot-scope="scope">
            <img :src="scope.row.courseAvatar" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column label="课程名称" prop="name"></el-table-column>
        <el-table-column label="课程分类">
          <template slot-scope="scope">{{scope.row.parentCatName}}/{{scope.row.childCatName}}</template>
        </el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage1"
        :total="courseTotal"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectCourse = false">取 消</el-button>
        <el-button type="primary" @click="submitCourse()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- <el-checkbox label="商品" name="giveType"></el-checkbox>
    <el-checkbox label="线下活动" name="giveType"></el-checkbox>-->
  </div>
</template>
<script>
import { getCourseList } from "@/api/course";
import { saveInvest } from "@/api/finance";
import { getGoodsList } from "@/api/goods";
import { getActivities } from "@/api/activities";

export default {
  data() {
    return {
      giveType: [],
      selectCourse: false,
      selectGoods: false,
      selectActivity: false,
      searchCourse: "",
      courseList: [],
      courseIdList: [],
      courseTotal: 0,
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,
      courseTable: [],
      goodsTable: [],
      activityTable: [],
      goodsTotal: 0,
      goodsList: [],
      goodsIdList: [],
      searchGoods: "",
      activityList: [],
      activityIdList: [],
      activityTotal: 0,
      searchActivity: ""
    };
  },
  methods: {
    //提交活动
    submitActivity(){
//取选中活动的Id

      var submitActivityId = [];
      for (let i = 0; i < this.activityIdList.length; i++) {
        submitActivityId.push(this.activityIdList[i].activityId);
      }
      //取显示活动的Id

      var tableId = [];
      for (let k = 0; k < this.activityTable.length; k++) {
        const element = this.activityTable[k];
        tableId.push(element.activityId);
      }
      //验证选择活动是否与显示活动重复
      if (this.isArrayContain(tableId, submitActivityId)) {
        this.$message("与已选活动重复");
        return;
      }
      this.activityTable = this.activityIdList.concat(this.activityTable);
      submitActivityId = submitActivityId.concat(tableId);
      this.activityEdit(submitActivityId);
      submitActivityId = []
    },
    //提交活动Id
    async activityEdit(id){
      let data = {
        payId: this.$route.query.payId,
        activity: id
      };
      await saveInvest(data).then(res => {
        if (res.data.statusCode == 200) {
          this.selectActivity = false;
          localStorage.setItem("activity", JSON.stringify(this.activityTable));
        }
        this.$message(res.data.data);
      });
    },
    //删除活动
    deleteActivity(index){
 //删除一条数据
      this.activityTable.splice(index, 1);
      //放入缓存，以防涮新后还是以前数据
      localStorage.setItem("activity", JSON.stringify(this.activityTable));
      //取显示课程的Id
      var id = [];
      for (let i = 0; i < this.activityTable.length; i++) {
        const element = this.activityTable[i];
        id.push(element.activityId);
      }
      if (id == false) {
        id = 0
      }
      this.activityEdit(id);
    },
    //获取活动列表
    getActivityList() {
      var data = {
        pageSize: 5,
        currentPage: 1,
        pageIndex: 0,
        status:-1,
        name:this.searchActivity,
        total:0,
        endAt:"",
        startAt:''
      };
      getActivities(data).then(res => {
        this.activityList = res.data.data.data;
        this.activityTotal = res.data.total;
      });
    },
    //获取活动Id
    getActivityId(val){
      this.activityIdList = val
    },
    //删除商品
    deleteGoods(index) {
      //删除一条数据
      this.goodsTable.splice(index, 1);
      //放入缓存，以防涮新后还是以前数据
      localStorage.setItem("goods", JSON.stringify(this.goodsTable));
      //取显示课程的Id
      var id = [];
      for (let i = 0; i < this.goodsTable.length; i++) {
        const element = this.goodsTable[i];
        id.push(element.mgId);
      }
      if (id == false) {
        id = 0;
      }
      this.goodsEdit(id);
    },
    //获取商品列表
    getGoodsLists() {
      let data = {
        productName: this.searchGoods,
        page: 1,
        limit: 5
      };
      getGoodsList(data).then(res => {
        this.goodsTotal = res.data.data.list.total * 2;
        this.goodsList = res.data.data.list.data;
      });
    },
    //提交选中的商品
    submitGoods() {
      //取选中商品的Id

      var submitGoodsId = [];
      for (let i = 0; i < this.goodsIdList.length; i++) {
        submitGoodsId.push(this.goodsIdList[i].mgId);
      }
      //取显示商品的Id

      var tableId = [];
      for (let k = 0; k < this.goodsTable.length; k++) {
        const element = this.goodsTable[k];
        tableId.push(element.mgId);
      }
      //验证选择商品是否与显示商品重复
      if (this.isArrayContain(tableId, submitGoodsId)) {
        this.$message("与已选商品重复");
        return;
      }
      this.goodsTable = this.goodsIdList.concat(this.goodsTable);
      submitGoodsId = submitGoodsId.concat(tableId);
      this.goodsEdit(submitGoodsId);
      submitGoodsId =[]
    },
    //获取选择商品id
    getGoodsId(val) {
      this.goodsIdList = val;
      console.log(this.goodsIdList);
    },
    //删除课程
    deleteCourse(index) {
      //删除一条数据
      this.courseTable.splice(index, 1);
      //放入缓存，以防涮新后还是以前数据
      localStorage.setItem("course", JSON.stringify(this.courseTable));
      //取显示课程的Id
      var id = [];
      for (let i = 0; i < this.courseTable.length; i++) {
        const element = this.courseTable[i];
        id.push(element.courseId);
      }
      if (id == false) {
        id = 0;
      }
      this.courseEdit(id);
    },
    //提交选中的课程
    submitCourse(val) {
      //取选中课程的Id
      var submitCourseId = [];
      for (let i = 0; i < this.courseIdList.length; i++) {
        const element = this.courseIdList[i];
        submitCourseId.push(element.courseId);
      }
      //取显示课程的Id
      var tableId = [];
      for (let k = 0; k < this.courseTable.length; k++) {
        const element = this.courseTable[k];
        tableId.push(element.courseId);
      }
      //验证选择课程是否与显示课程重复
      if (this.isArrayContain(tableId, submitCourseId)) {
        this.$message("与已选课程重复");
        return;
      }
      //选中的和原来有的全部链接并提交
      this.courseTable = this.courseIdList.concat(this.courseTable);
      submitCourseId = submitCourseId.concat(tableId);
      this.courseEdit(submitCourseId);
      submitCourseId = []
    },
    //验证两数组是否有包含关系
    isArrayContain(a, b) {
      //判断数组a是否包含b
      for (var i = 0; i < b.length; i++) {
        let t = false;
        for (var j = 0; j < a.length; j++) {
          if (b[i] == a[j]) {
            t = true;
            break;
          }
        }
        if (!t) return false;
      }
      return true;
    },
    //提交课程Id
    async courseEdit(courseId) {
      let data = {
        payId: this.$route.query.payId,
        courses: courseId
      };
      await saveInvest(data).then(res => {
        if (res.data.statusCode == 200) {
          this.selectCourse = false;
          localStorage.setItem("course", JSON.stringify(this.courseTable));
        }
        this.$message(res.data.data);
      });
    },
    //提交商品Id
    async goodsEdit(goodsId) {
      let data = {
        payId: this.$route.query.payId,
        goods: goodsId
      };
      await saveInvest(data).then(res => {
        if (res.data.statusCode == 200) {
          this.selectGoods = false;
          localStorage.setItem("goods", JSON.stringify(this.goodsTable));
        }
        this.$message(res.data.data);
      });
    },
    getCourseId(val) {
      // console.log(val.courseId);
      // 选择多选框时插入的数组
      this.courseIdList = val;
    },
    //获取课程列表
    getCouresList() {
      let data = {
        name: this.searchCourse,
        page: 1,
        limit: 5
      };
      getCourseList(data).then(res => {
        this.courseList = res.data.data.list.data;
        this.courseTotal = res.data.data.list.total * 2;
        console.log(this.total);
      });
    }
  },
  watch: {
    currentPage1(val) {
      console.log(val);
      var data = {
        page: val,
        limit: 5
      };
      getCourseList(data).then(res => {
        this.courseList = res.data.data.list.data;
      });
    },
    currentPage2(val) {
      let data = {
        page: val,
        limit: 5
      };
      getGoodsList(data).then(res => {
        this.goodsTotal = res.data.data.list.total * 2;
        this.goodsList = res.data.data.list.data;
      });
    },
    currentPage3(val) {
      var data = {
        pageSize: 5,
        pageIndex: val
      };
      getActivities(data).then(res => {
        this.activityList = res.data.data;
      });
    }
  },
  mounted() {
    var course = JSON.parse(localStorage.getItem("course"));
    var activity = JSON.parse(localStorage.getItem("activity"));
    var goods = JSON.parse(localStorage.getItem("goods"));
    this.courseTable = course;
    this.goodsTable = goods;
    this.activityTable = activity;
    this.getCouresList();
    this.getGoodsLists();
    this.getActivityList()
  },
  components: {}
};
</script>

<style scoped>
</style>
